<template>
  <div class="banner">
      <el-carousel trigger="click" height="473px">
        <el-carousel-item :key="key" v-for="banner,key in banner_list">
          <a :href="banner.link"><img width="100%" :src="banner.image" alt=""></a>
        </el-carousel-item>
      </el-carousel>
  </div>
</template>

<script>
  export default {
    name:"Banner",
    data(){
      return {
        banner_list:[]
      };
    },
    created() {
      // 获取轮播图数据
      this.$axios.get(this.$settings.Host+"/banner/").then(response=>{
        this.banner_list = response.data;
        console.log(response.data);
      }).catch(error=>{
        console.log(error.response);
      });
    }
  }
</script>

<style>
.el-carousel__arrow{
  width: 100px!important;
  height: 100px!important;
}
.el-icon-arrow-left{
  font-size: 35px;
  margin-left: 50px;
}
.el-carousel__arrow--left{
  left: -50px;
}
</style>
